<template>
  <uni-popup ref="popup" type="dialog" @change="change">
    <uni-popup-dialog
      v-model="name"
      mode="input"
      :title="title"
      :placeholder="placeholderShow"
      class="mz-uni-popup-dialog"
      @confirm="dialogInputConfirm"
    ></uni-popup-dialog>
  </uni-popup>
</template>

<script>
import uniPopup from "@/components/uni-popup/uni-popup.vue";
import uniPopupDialog from "@/components/uni-popup/uni-popup-dialog.vue";
export default {
  components: { uniPopup, uniPopupDialog },
  props: {
    title: {
      type: String,
      default: () => ""
    },
    tip: {
      type: String,
      default: () => ""
    },
    placeholder: {
      type: String,
      default: () => ""
    }
  },
  data() {
    return {
      name: ""
    };
  },
  computed: {
    placeholderShow() {
      return this.placeholder || `请输入${this.title}`;
    }
  },
  methods: {
    open(value) {
      if (value) this.name = value;
      this.$refs.popup.open();
    },
    close() {
      this.$refs.popup.close();
    },
    dialogInputConfirm(e, name) {
      if (name) {
        this.$emit("submit", name);
        e();
      } else {
        uni.showToast({
          icon: "none",
          title: this.tip || this.title
        });
      }
    },
    change(e) {
      // console.log("change", this.name, e);
    }
  }
};
</script>

<style scoped lang="scss">
.mz-uni-popup-dialog {
  margin-top: -200rpx;
}
</style>
